<template>
	<div>
		<x-button @click.native="evt_showPop">选择城市</x-button>
		<popup v-model="isShowPop">
			<popup-header
				left-text="取消"
				right-text="完成"
				@on-click-left="evt_cancel"
				@on-click-right="evt_selected"
			></popup-header>
			<picker ref="cityPicker" v-if="tempCity.length" :data="allList" :fixed-columns="3" v-model="tempCity"></picker>
		</popup>
	</div>	
</template>
<script type="text/javascript">
	import { XButton, Popup, PopupHeader, Picker } from 'vux';
	import { QueryCityAreaModel } from '@/model/com.model';

	export default {
		name: 'city-picker',
		data: () => {
			return {
				isShowPop: false,
				isFirst: true,
				isFetching: false,
				pInfo: 1,
				cInfo: 1,
				aInfo: 1,
				tempCity: [],
				proList: [],
				cityList: [],
				areaList: [],
				allList: []
			}
		},
		watch: {
			pInfo() {
				if (!this.isFirst) {
					this.isFetching = true;
					this.queryCity();
				}
			},
			cInfo() {
				if (!this.isFirst) {
					this.isFetching = true;
					this.queryArea();
				}
			},
			tempCity(nV, oV) {
				this.pInfo = nV[0];
				this.cInfo = nV[1];
				this.aInfo = nV[2];
			}
		},
		created() {
			this.QueryCityAreaModel = new QueryCityAreaModel();
			this.QueryCityAreaModel.setUrl();
			this.queryProvince();
		},
		methods: {
			formatData(data, key, infoKey, ubind) {
				data.map(item => item.value = item.id);
				this[key] = data;
				this[infoKey] = data[0].id;
				if (ubind) {
					this.tempCity = [this.pInfo, this.cInfo, this.aInfo];
				}
			},
			// 搜索省
			queryProvince() {
				this.QueryCityAreaModel
				.setParams({pid: 0})
				.go()
				.then(res => {
					this.formatData(res.data || [], 'proList', 'pInfo');
					if (this.isFirst) {
						this.queryCity();
					}
				})
				.catch(err => {
					console.log(err);
					this.isFetching = false;
				});
			},
			// 搜索市
			queryCity() {
				let pid = this.pInfo;
				this.QueryCityAreaModel
				.setParams({pid})
				.go()
				.then(res => {
					this.formatData(res.data || [], 'cityList', 'cInfo');
					if (this.isFirst) {
						this.queryArea();
					}
				})
				.catch(err => {
					console.log(err);
					this.isFetching = false;
				});
			},
			queryArea() {
				let pid = this.cInfo;
				this.QueryCityAreaModel
				.setParams({pid})
				.go()
				.then(res => {
					let areaData = res.data;
					this.formatData(areaData, 'areaList', 'aInfo', this.isFirst);
					this.allList = [this.proList, this.cityList, this.areaList];
					this.isFirst = false;
					this.isFetching = false;
				})
				.catch(err => {
					console.log(err);
					this.isFetching = false;
				});
			},
			evt_showPop() {
				this.isShowPop = true;
			},
			evt_cancel() {
				this.isShowPop = false;
			},
			evt_selected() {
				let nm, id;
				if (!this.isFetching) {
					nm = this.$refs.cityPicker.getNameValues()
					id = this.tempCity[this.tempCity.length - 1];
					this.$emit('on-select', {nm, id});
					this.isShowPop = false;
				} else {
					this.$vux.toast.text('正在查询');
				}
			}
		},
		components: {
			XButton,
			Popup, 
			Picker,
			PopupHeader
		}
	}
</script>